<template>
  <div class="UserDeptship">
    <div class="pubBig Privilege">
      <div class="h0">
        <p class="lt"></p>
      </div>
      <el-row>
        <el-col :span="12">
          <div style="background: #eff8ff">

            <select
              class="form-control"
              v-if="false"
              style="width: 130px!important;margin-right: 12rem;"
              v-model="selectZZJG"
              @change="queryList"
              placeholder="请选择"
            >
              <option
                v-for="(item,index) in zzjgList"
                :label="item.HospitalName"
                :value="item"
                :key="index"
              ></option>
            </select>
          </div>
        </el-col>
        <el-col :span="24">
          <div
            class="btnLine"
            style="background: #eff8ff"
          >

            <button
              class="btn btn-default"
              @click="Fanselectful()"
              v-if="false"
            >反选</button>
            <button
              class="btn btn-default"
              @click="saveUserDeptList"
            >保存</button>
          </div>
        </el-col>

      </el-row>

      <div class="LeftMain">
        <div class="Tb">
          <table class="table table-bordered">
            <thead>
              <tr>
                <th>编号</th>
                <th>分类名称</th>
              </tr>
            </thead>
            <tbody>
              <tr
                v-for="(item,index) in userList"
                :key="index"
                @click="openDetails(item,index)"
                :class="{selGreen:changeSelectStyle == index}"
              >
                <td>{{item.UserId}}</td>
                <td>{{item.UserName}}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="RightMain">
        <p class="p1">字典列表</p>
        <div class="Tb">

          <div class="menu">
            <el-tree
              :data="deptList"
              show-checkbox
              default-expand-all
              node-key="Id"
              ref="tree"
              highlight-current
              @check="handleCheck"
              :props="defaultProps"
            >
            </el-tree>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      msg: {},
      model_query: [],
      changeSelectStyle: -1,
      data: [],
      id: 1000,
      defaultProps: {
        // children: "childs",
        label: "name2"
      },
      listdata: [],
      Idlist: [],
      inindex: "",
      multipleTable: [],

      /*************************************************************************/
      datalist: [
        {
          ParentId: 0,
          PermissionId: -1,
          PermissionName: "权限列表",
          Url: "",
          childs: [
            {
              ParentId: -1,
              PermissionId: 3,
              PermissionName: "首页",
              Url: "/Bedinformation",
              childs: []
            },
            {
              ParentId: -1,
              PermissionId: 3,
              PermissionName: "首页2",
              Url: "/Bedinformation",
              childs: []
            }
          ]
        }
      ],
      data: [
        {
          PermissionName: '一级 3',
          childs1: [
            {
              PermissionName: '二级 3-1',
              childs1: []
            },
            {
              PermissionName: '二级 3-2',
              childs1: []
            }
          ]
        }
      ],

      RoleObj: null,
      PermissionsMenuList: [],
      Permissions: [],
      RolePermissionList: [],
      /***********************************************************************/
      zzjgList: [],
      selectZZJG: {},
      deptList: [],
      userList: [],
      userDeptList: [],
      selectUser: null,
      deptIds: [],
    };
  },
  methods: {
    queryList () {
      this.getUserList();
      this.getDeptList();
    },
    getUserList () {
      this.userList = [];
      if (this.selectZZJG == null) {
        this.$message({
          showClose: true,
          message: "请选择操作机构！",
          type: "error"
        });
        return;
      }
      var params = {
        HospitalId: this.selectZZJG.HospitalId,
        name: ""
      };
      this.$get("User/GetList", params)
        .then(res => {
          this.userList = res.data;
          console.log("用户列表查询结果");
          console.log(res);
        })
        .catch(err => {
          console.log(err);
        });
    },
    getDeptList () {
      this.deptList = [];

      if (this.selectZZJG == null) {
        this.$message({
          showClose: true,
          message: "请选择操作机构！",
          type: "error"
        });
        return;
      }
      var params = {
        HospitalId: this.selectZZJG.HospitalId,
        name: ""
      };
      this.$get("Dept/GetList", params)
        .then(res => {
          console.log("科室列表查询结果");
          // console.log(res);
          // this.deptList = res.data;
          res.data.forEach(m => {
            m.childs2 = []
            m.name2 = m.Name
            console.log(m);
            this.deptList.push(m)
          })

        })
        .catch(err => {
          console.log(err);
        });
    },
    getZZJGList () {
      this.zzjgList = [];
      var params = {
        name: ""
      };
      this.$get("Hospital/GetList", params)
        .then(res => {
          //this.total = res.data.totalCount;
          this.zzjgList = res.data;
          if (this.zzjgList.length > 0) {
            this.selectZZJG = this.zzjgList[0];
            this.getDeptList();
            this.getUserList();
          }
          console.log("组织机构列表查询结果");
          console.log(res);
        })
        .catch(err => {
          console.log(err);
        });
    },
    handleCheck (checkedNodes, checkedKeys) {
      console.log("选中科室");
      console.log(checkedKeys.checkedNodes);
      this.userDeptList = checkedKeys.checkedNodes;
    },
    openDetails (row, index) {
      console.log("选中用户");
      console.log(row);
      console.log(index);
      this.changeSelectStyle = index;
      this.selectUser = row;
      this.queryUserDeptList(this.selectUser.UserId)
    },
    //保存用户科室对照
    saveUserDeptList () {
      if (this.selectUser == null) {
        this.$message({ message: "选择用户后保存", type: "success" });
        return
      }
      this.userDeptList.forEach(m => {
        this.deptIds.push(m.Id);
      })
      var params = {
        UserId: this.selectUser.UserId,
        Depts: this.deptIds
      };
      //POST /api/User/MatchSection
      this.$post("User/MatchSection", params)
        .then(res => {
          console.log("对照完成");
          console.log(res);
          if (res.code == 0) {
            this.$refs.tree.setCheckedKeys([]);
            this.selectUser = null;
            this.changeSelectStyle = -1;
            this.deptIds = [];
            this.userDeptList = [];
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    //用户科室列表查询
    queryUserDeptList (UserId) {
      this.userDeptList = [];
      var params = {
        UserId: UserId
      };
      //GET /api/User/GetSectionList
      this.$get("User/GetSectionList", params)
        .then(res => {
          console.log("角色权限列表查询结果");
          console.log(res);
          if (res.code == 0) {
            this.userDeptList = res.data;
            var PermissionIdList = []
            for (var i = 0; i < this.userDeptList.length; i++) {
              PermissionIdList.push(this.userDeptList[i].DeptId)
            }
            this.$refs.tree.setCheckedKeys(PermissionIdList);
          } else {
            this.$refs.tree.setCheckedKeys([]);
          }
        })
        .catch(err => {
          this.$refs.tree.setCheckedKeys([]);
          console.log(err);
        });
    },
    /********************************************/




    setCheckedNodes () {
      this.$refs.tree.setCheckedNodes([{
        id: 5,
        label: '二级 2-1'
      }, {
        id: 9,
        label: '三级 1-1-1'
      }]);
    },
    setCheckedKeys () {
      this.$refs.tree.setCheckedKeys([3]);
    },


    /*************************************************************************/

    getSElect (rows) {
      for (var i = 0; i < rows.length; i++) {
        if (rows[i].HaveFun == 1) {
          this.multipleTable.push(rows[i]);
          // this.Fanselectful();
        } else {
          return;
        }
      }
    },
    Fanselectful () {
      console.log(this.multipleTable);
      if (this.multipleTable) {
        this.multipleTable.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    Prescessful () {
      console.log(this.Idlist);
      var datalist = {
        model: "11.综合维护-角色与权限",
        code: "11061",
        input: {
          role_id: this.inindex,
          powers: this.Idlist
        }
      };
      this.$post("CloudHIS/Business_Handle", datalist)
        .then(res => {
          if (res.code == 0) {
            this.$message({ message: "保存成功", type: "success" });
          } else {
            this.$message({ showClose: true, message: res.msg, type: "error" });
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    gettr (item) {
      this.Idlist = [];
      console.log(item);
      item.forEach(v => {
        this.Idlist.push(v.id);
      });
      this.multipleSelection = item;
    }
  },
  created () {
    if (this.$route.query.Token) {
      localStorage.setItem('Token', this.$route.query.Token)
    }
    this.getZZJGList();
  }
};
</script>
<style lang="scss">
.UserDeptship {
  .Privilege .LeftMain {
    position: absolute;
    width: 365px;
    top: 86px;
    left: 0;
    bottom: 10px;
    border-right: 1px solid #ddd;
  }

  .Privilege .LeftMain .Tb {
    overflow-y: auto;
    position: absolute;
    top: 1px;
    left: 10px;
    right: 10px;
    bottom: 0;
    border: 1px solid #ddd;
  }

  .Privilege .LeftMain .Tb table {
    border: none;
  }

  .Privilege .LeftMain .Tb table td:first-child {
    border-left: none;
  }

  .Privilege .LeftMain .Tb table td:last-child {
    border-right: none;
  }

  .Privilege .LeftMain .Tb table tr {
    cursor: pointer;
  }

  .Privilege .LeftMain .Tb table tr td {
    cursor: pointer;
  }

  .Privilege .RightMain {
    padding-left: 365px;
  }

  .Privilege .RightMain input {
    position: relative;
    top: 1px;
    margin-right: 5px;
  }

  .Privilege .RightMain label {
    cursor: pointer;
  }

  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }

  .RightMain .Tb {
    position: absolute;
    top: 116px;
    left: 372px;
    right: 5px;
    bottom: 10px;
    overflow: auto;
    border: 1px solid #ddd;
  }
}
</style>
